<template>
	<contents :heightInclude="['tabBar']">
		<view
			class="card-list__view u-padding-left-20 u-padding-right-20"
			v-for="item in cardList"
			:key="item.id"
			@click="
				onClickCoupon(
					'/pages/user/cardbag/card?domainPrefix=' + item.indexUrl ||
						''
				)
			"
		>
			<view
				class="card-item__view u-margin-bottom-14"
				:style="`background-image: url(` + item.cardPicUrl + `)`"
			>
				<view class="card-item__icon">
					<u-image
						class="card-item__image"
						width="100%"
						height="100%"
						border-radius="50%"
						:src="item.logoUrl"
					></u-image>
				</view>
				<view class="card-item__content u-margin-left-14">
					<test class="top u-font-30 u-line-1">
						{{ item.storeName }}
					</test>
					<test class="bottom u-font-24 u-margin-top-13 u-line-1">
						{{ item.cardDesc }}
					</test>
				</view>
			</view>
		</view>
	</contents>
</template>

<script>
export default {
	props: ['cardList'],
	data() {
		return {}
	},
	created() {
		this.getFirstPath()
	},
	methods: {
		onClickCoupon(url) {
			uni.navigateTo({
				url
			})
		},
		getFirstPath() {
			this.cardList.forEach(res => {
				const str = res.indexUrl.split(/http(s)?\:\/\//)[2]
				if (str) {
					return (res.indexUrl = str.split('.')[0])
				}
				return (res.indexUrl = '')
			})
		}
	}
}
</script>

<style lang="scss">
.card-list__view {
	.card-item__view {
		background-size: 100% 100%;
		background-color: #999;
		height: 145rpx;
		border-radius: 10rpx;
		padding: 29rpx 0 28rpx 38rpx;
		display: flex;

		.card-item__icon {
			width: 88rpx;
			height: 88rpx;
			flex-basis: 88rpx;
			flex-shrink: 0;
			.card-item__image {
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.card-item__content {
			width: 90%;
			.top {
				display: block;
				color: #fff;
				max-width: 90%;
			}

			.bottom {
				display: block;
				color: #fff;
				max-width: 90%;
			}
		}
	}
}
</style>
